<!DOCTYPE html>
<html>
<head>
    <title>模板页</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入 Bootstrap -->
    <link href="./css/bootstrap.css" rel="stylesheet" />
    <!-- 引入动画库 -->
    <link href="./css/animate.css" rel="stylesheet" />
    <!-- 引入字体图标库 -->
    <link href="./css/font-awesome.css" rel="stylesheet" />
    <!-- 引入自定义的样式 -->
    <link href="./css/custom.css" rel="stylesheet" />


    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" rel="external nofollow" ></script>          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" rel="external nofollow" ></script>       <![endif]-->
</head>
<body>
    <div id="dis"></div>
    <button id="btn">获取数据</button>

<div id="app">
    
</div>


<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="js/jquery-3.3.1.js" ></script>
<!-- 包括所有已编译的插件 -->
<script src="./js/bootstrap.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/vue-resource.js"></script>
<script src="./js/custom.js"></script>

<script>
    /*
        直接创建chrome浏览器的快捷方式，在属性中找到打开路径，在…chrome.exe后面加上
        --args --disable-web-security --user-data-dir="C:/ChromeDevSession"
        临时关闭浏览器关于跨域的限制,也可以修改快捷方式持久支持
    */

    $(document).ready(function(){

        // $("#btn").click(function(){
        //     $.get("http://192.168.31.103:8888/data.json",function(mydata,state){
        //         console.log(mydata);
        //         $("#dis").text(JSON.parse(mydata).name);//如果服务器没有添加json类型,则返回的认为是文本
        //     });
        // });

        $("#btn").click(function(){
            $.ajax({
                url:"http://192.168.31.103:8888/data.json",
                method:"GET",
                response:JSON,//记得要在服务器上添加对应的类型否则客户端还需要转换
                success:function(mydata){
                    $("#dis").text(mydata.name);
                }
            });
        });


    });

    function handleResponse(response){
            console.log('The responsed data is: '+response.data);
        }
</script>
</body>
</html>